<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/fragment/OrderHeader :: OrderHeader}"/>
<body class="cbp-spmenu-push">
<!--top-header-->
<!--bottom-->
<section th:replace="~{/fragment/SectionButton :: SectionButton}"/>
<nav th:replace="~{fragment/nav :: nav}"/>
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->

<!-- banner -->
<div th:replace="~{/fragment/banner :: banner}"/>
<!-- contact -->
<div class="shop_product_wrapper clearfix">
    <div class="product">

        <div class="content">
            <span class="onsale">Sale!</span>
            <div class="single_product_slider">
                <!--                <span class="sale_new"><span class="text">Sale!</span></span>-->
                <div class="thumbs_gall_slider_con content_thumbs_gall gall_arrow2">
                    <div class="thumbs_gall_slider_larg owl_abs_arr">
                        <div class="item">
                            <a class="feature_inner_ling hm_commerce_slider">
                                <img src="img/shop/product5-a-500x600.jpg" alt="Main Product Image"
                                     th:src="${Hotel.photo1}">
                            </a>
                        </div>
                        <div class="item">
                            <a class="feature_inner_ling hm_commerce_slider">
                                <img src="img/shop/product5-b-500x600.jpg" th:src="${Hotel.photo2}" alt="1">
                            </a>
                        </div>
                        <div class="item">
                            <a class="feature_inner_ling hm_commerce_slider">
                                <img src="img/shop/product5-d-500x600.jpg" th:src="${Hotel.photo3}" alt="2">
                            </a>
                        </div>
                        <div class="item">
                            <a class="feature_inner_ling hm_commerce_slider">
                                <img src="img/shop/product5-e-500x600.jpg" th:src="${Hotel.photo4}" alt="3">
                            </a>
                        </div>
                    </div>

                    <div class="gall_thumbs">
                        <div class="item">
                            <a class="gall_thumb_i" href="img/shop/product5-a-870x1110.jpg" th:href="@{${Room.image}}">
                                <img src="img/shop/product5-a-150x150.jpg" alt="Main Product Image"  th:src="${Room.image}">
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- End single_product_slider -->

            <div class="single_product_details">
                <h1 class="product_title single_product_title" th:text="${Hotel.hotelTranslatedName}">Tee Jeans</h1>
                <div class="shopping-commerce-product-rating">
                    <div class="star-rating" title="Rated 5 out of 5">
                        <span th:style="|width:${Hotel.starRating}%|"></span>
                    </div>
                </div>
                <div>
                    <div class="single_product_price_con clearfix">
                        <!--                        <del><span class="amount"><span>$</span>240.00</span></del>-->
                        <span>￥</span>
                        <ins><span class="amount" th:text="${Horder.price}">220.00</span></ins>
                    </div>
                </div>
                <div class="single_product_desc">
                    <ul class="list_icon check_arrows clearfix">
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span><span
                                th:text="|姓名:${Horder.uName}|"></span></li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span><span
                                th:text="|电话:${Horder.phone}|"></span></li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span> <span
                                th:text="|房型:${Room.rtypeName}|"></span></li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span> <span
                                th:text="|入住时间:${Horder.inTime}|"></span></li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span><span
                                th:text="|退房时间:${Horder.outTime}|"></span></li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span><span th:text="房间数"></span>
                            <div class="quantity buttons_added clearfix">
                                <div class="quantity_controll_con">
                                    <input type="button" class="quantity_controll minus" value="-">
                                    <input type="number" step="1" min="1" name="quantity" th:value="${Horder.roomCount}"
                                           title="Qty" class="input-text qty text" size="4"/>
                                    <input type="button" class="quantity_controll plus" value="+">
                                </div>
                            </div>
                        </li>
                        <li><span class="list-arr"><i class="ico-arrow-right5"></i></span><span>订单状态:<span
                                id="orderState" th:text="${Horder.orderState}"></span></span></li>
                        <li>
                            <button class="single_add_to_cart_button button alt" id="Update" th:text="更新订单">Add to
                                cart
                            </button>
                            <button type="submit" class="single_add_to_cart_button button alt" id="Cancle"
                                    th:text="取消订单">Add to cart
                            </button>
                            <button type="submit" class="single_add_to_cart_button button alt" id="Exit"
                                    th:text="退款">Add to cart
                            </button>
                        </li>
                    </ul>
                </div>


            </div>
            <!-- End single_product_details -->
            <div class="clear"></div>

        </div>
        <!-- End Content -->

        <!-- Content -->
        <div class="content">
            <div class="hm-tabs tabs2">

                <nav>
                    <ul class="tabs-navi">
                        <li class="description_tab">
                            <a href="#" data-content="tab-description" th:text="酒店介绍">Description</a>
                        </li>
                        <li class="reviews_tab">
                            <a href="#" data-content="tab-reviews"  th:text="评价">Reviews (1)</a>
                        </li>
                    </ul>
                </nav>

                <ul class="tabs-body">
                    <li data-content="tab-description">
                        <h2 th:text="${Hotel.hotelTranslatedName}"></h2>
                        <p th:text="${Hotel.overview}"/></li>

                    <li data-content="tab-reviews">
                        <div id="reviews">

                            <div id="comments">
                                <h2><span th:text="${Hotel.hotelTranslatedName}"></span><span>的评价</span></h2>
                                <ol class="commentlist">
                                    <li>
                                        <div id="comment-1" class="comment_container">
                                            <div class="comment-text" th:each="Review :${Review}">
                                                <div class="star-rating" title="Rated 5 out of 5">
                                                    <span th:style="|width:${Review.rStar}%|"></span>
                                                </div>
                                                <p class="meta"> <strong th:text="${Review.uname}">John Doe</strong> &ndash;
                                                    <time datetime="2017-01-31T09:28:13+00:00" th:text="${Review.rData}">January 31, 2017</time>: </p>
                                                    <p th:text="${Review.description}">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour of this randomised words which don’t look even slightly believable There are many variations of passages of Lorem Ipsum available.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </div>

                            <!-- review_form_wrapper -->
                            <div id="review_form_wrapper">
                                <div id="review_form">
                                    <div id="respond" class="comment-respond">
                                        <h3 id="reply-title" class="comment-reply-title" th:text="添加评价">Add a review <small><a rel="nofollow" id="cancel-comment-reply-link" href="#">Cancel reply</a></small>
                                        </h3>
                                        <div class="comment-form">
                                            <p class="comment-form-rating">
                                                <label for="rating" th:text="星级">Your Rating</label>
                                                <span class="stars">
                                                                    <a class="star-1" data-rate="1" href="#">1</a>
                                                                    <a class="star-2" data-rate="2" href="#">2</a>
                                                                    <a class="star-3" data-rate="3" href="#">3</a>
                                                                    <a class="star-4" data-rate="4" href="#">4</a>
                                                                    <a class="star-5" data-rate="5" href="#">5</a>
                                                                </span>
                                                <select name="rating" id="rating" aria-required="true">
                                                    <option value="">Rate&hellip;</option>
                                                    <option value="5">Perfect</option>
                                                    <option value="4">Good</option>
                                                    <option value="3">Average</option>
                                                    <option value="2">Not that bad</option>
                                                    <option value="1">Very Poor</option>
                                                </select>
                                            </p>
                                            <p class="comment-form-comment">
                                                <label for="comment" th:text="你的评价">Your Review <span class="required">*</span></label>
                                                <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
                                            </p>
                                            <p class="form-submit">
                                                <input name="submit" type="submit" id="submit" class="submit" value="提交" />
                                            </p>
                                        </div>
                                    </div>
                                    <!-- #respond -->
                                </div>
                            </div>
                            <!-- End review_form_wrapper -->
                            <div class="clear"></div>

                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- End Content -->
    </div>
    <!-- End product -->
</div>
<!-- //contact -->
<div th:replace="~{/fragment/footer :: footer}"/>


<script th:inline="javascript">
    $(document).ready(function () {
        var orderState = $("#orderState").text();
        var data = [[${data}]];
        // alert(orderState);
        if ($.trim(orderState) != $.trim("未支付")) {
            $("#Update").hide();
            $("#Cancle").hide();
        }
        if ($.trim(orderState) != $.trim("已支付")) {
            $("#Exit").hide();
        }
        $("#Cancle").click(function () {
            $.post("/order",
                {
                    Msg: "yes",
                    orderNumber: [[${orderNumber}]]
                },
                function (data) {
                    window.location.href = "/orderList";
                });
        });
        $("#Exit").click(function () {
            $.post("/order",
                {
                    Msg: "退款",
                    orderNumber: [[${orderNumber}]]
                },
                function (data) {
                    window.location.href = "/orderList";
                });
        });

        $("#submit").click(function () {
            var description = $("#comment").val();
            var rStar = $("#rating").val();
            var myDate = new Date();
            var rData = myDate.toLocaleString( );
            var orderNumber=[[${orderNumber}]];
            $.post("/order",
                {
                    description: description,
                    orderNumber:orderNumber ,
                    rStar:rStar,
                    rData:rData,
                    hName:[[${Hotel.hotelTranslatedName}]]
                },
                function (data) {
                // alert("成功!");
                //     console.log("yes");
                    location.href="/order?orderNumber="+orderNumber;
                });
        });
    });
</script>
</body>
</html>